<template>
    <div class="gzdsx-pos-dialog__overlayer" v-show="show">
        <div class="gzdsx-pos-dialog" :style="{'width':width}">
            <div class="gzdsx-pos-dialog__header">
                <div class="title">{{ title }}</div>
                <span class="close" @click="close">&times;</span>
            </div>
            <div class="gzdsx-pos-dialog__body">
                <div class="gzdsx-pos-dialog__content">
                    <slot/>
                </div>
            </div>
            <slot name="footer"/>
        </div>
    </div>
</template>

<script>
export default {
    name: "PosDialog",
    props: {
        title: {
            type: String,
            default: 'Dialog'
        },
        visible: {
            type: Boolean,
            default: false
        },
        width: {
            type: String,
            default: '50%'
        }
    },
    data() {
        return {
            show: false
        }
    },
    watch: {
        visible(val) {
            if (val !== this.show) {
                this.show = val;
            }

            if (val) {
                document.body.appendChild(this.$el);
            }
        }
    },
    methods: {
        close() {
            this.$emit('close');
        }
    },
    created() {
        this.show = this.visible;
        if (this.show) {
            document.body.appendChild(this.$el);
        }
    },
    destroyed() {
        if (this.$el && this.$el.parentNode) {
            this.$el.parentNode.removeChild(this.$el);
        }
    },
}
</script>

<style scoped>

</style>